<template>
  <div class="main">
    <el-container>
      <el-aside width="auto">
        <el-scrollbar height="100%" view-style="height:100%">
          <menu-right></menu-right>
        </el-scrollbar>
      </el-aside>
      <el-container class="right_box">
        <img
          v-if="!isCollapse"
          src="@/assets/img/button_Drag.svg"
          @mousedown="downListener"
          alt=""
        />
        <el-header>
          <mine-header></mine-header>
        </el-header>
        <el-main>
          <main-content></main-content>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, onMounted, provide, ref } from "vue";
import { useStore } from "vuex";
const menuRight = defineAsyncComponent(() => import("@/components/menu.vue"));
const mineHeader = defineAsyncComponent(
  () => import("@/components/header.vue")
);
const mainContent = defineAsyncComponent(
  () => import("@/components/mainContent.vue")
);
const store = useStore();
const isCollapse = ref(store.state.isCollapse);
// 因为header和menu都需要用到 是否展开控制 所以使用provide暴露
provide("isCollapse", isCollapse);
const downListener = () => {
  document.body.onmousemove = (event: MouseEvent) => {
    if (event.buttons != 1) {
      document.body.onmousemove = null;
    } else {
      let dom = <HTMLImageElement>(
        document.querySelector(".el-menu-vertical-demo:not(.el-menu--collapse)")
      );
      dom?.style &&
        (dom.style.width = (dom.clientWidth + event.layerX ?? 0) + "px");
      console.log("更改", dom.style.width);

      if (dom.clientWidth < 50) {
        document.body.onmousemove = null;
        isCollapse.value = true;
      }
    }
  };
};

onMounted(() => {
  let timer = true;
  window.addEventListener("resize", (event) => {
    if (timer) {
      timer = false;
      if ((event.target as Window).innerWidth < 768) {
        isCollapse.value = true;
      } else {
        isCollapse.value = false;
      }
      setTimeout(() => {
        timer = true;
      }, 300);
    }
  });
});
</script>

<style lang="scss" scoped>
.main {
  height: 100vh;
  width: 100vw;
  display: flex;

  .right_box {
    position: relative;

    > img {
      position: absolute;
      left: 0;
      top: 50%;
      z-index: 2000;
      width: 50px;
      transform: translateX(-50%) translateY(-50%);
      cursor: w-resize;
      -webkit-user-drag: none;
    }
  }
}
</style>